<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--可以让部分国产浏览器默认采用高速模式渲染页面-->
  <meta name="renderer" content="webkit">
  <!--为了让 IE 浏览器运行最新的渲染模式下-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--SEO三大标签-->
  <!--    <title>知渔音乐</title>-->
  <!--    <meta name="keywords" content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，移动站，music.163.com">-->
  <!--    <meta name="description" content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。">-->
  <!--
  apple-touch-icon: 是苹果私有的属性
  作用: 指定将网页保存到主屏幕上的时候的图标
  -->
  <link rel="apple-touch-icon"  href="./apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="114x114" href="./apple-touch-icon114.png">
  <link rel="apple-touch-icon" sizes="152x152" href="./apple-touch-icon152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon180.png">
  <!--网页快捷图标-->
  <link rel="icon" href="./favicon.ico">
  <script>
    /*
    注意点:
    预渲染的本质就是在打包时就"模拟浏览器"提前访问路由对应的网页, 然后将访问的结果写入到.html文件中
    但是由于在打包时访问并不是通过"真实的浏览器"来访问, 所以拿不到正是的像素比
    所以预渲染时写入到.html文件中的meta就是错误的
    也正是因为预渲染的时候已经写入过meta标签了, 而运行的时候又会执行一次JS代码再写入一次
    就导致了网页中有两个meta标签
    * */
    let scale = 1.0 / window.devicePixelRatio;
    let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
    document.write(text);
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
    document.documentElement.setAttribute('data-dpr', window.devicePixelRatio + '');
    document.documentElement.setAttribute('data-theme', 'theme'); // 默认主题
  </script>
  <title>储梦池</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
<!--
1.初始化HTML中的代码
2.利用rem+视口释放的方式来适配移动端
注意点: 如果在HTML文件中用到了字符串模板, 字符串模板中用到了变量, 那么html-plugin是无法处理的, 所以会报错
        如果想解决这个问题, 那么我们需要再借助一个loader, html-loader
3.借助postcss-pxtorem实现自动将px转换成rem
4.借助webpack实现CSS3/ES678语法的兼容
5.借助fastclick解决移动端100~300ms的点击事件延迟问题
6.初始化默认的全局样式
注意点: 在移动端开发中, 一般情况下我们不需要让字体大小随着屏幕尺寸的变化而变化
        由于我们是通过视口缩放来适配移动端的, 所以我们不能直接设置字体大小, 否则字体大小就会随着屏幕尺寸的变化而变化
-->
